<template>
  <div>
    <h1>hello vue</h1>
    <ul>
      <!-- 
        key值：必须是唯一不重复的数字获取字符串
        key的作用：
          提高DOM更新性能
        如何提高呢？
        答：先产生新旧DOM，然后需要根据key进行比较，最后决定哪些部分复用哪些更新(只更新最新内容，其他内容一律复用)。

        面试常问题

        key值为下标值的时候，是不能达到提高DOM更新性能的效果。

        总结key的设置：
          有id用id，没id用索引(下标值)
       -->
      <li v-for="(item, index) in arr" :key="index">{{ item.name }}</li>
    </ul>
    <button @click="handlerFn">向数组下标1位置插入新的内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { name: "老大", id: 1 },
        { name: "老二", id: 2 },
        { name: "老三", id: 3 },
      ],
    };
  },
  methods: {
    handlerFn() {
      this.arr.splice(1, 0, {
        name: "新来的",
        id: 4,
      });
    },
  },
};
</script>

<style>
</style>